<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-table v-loading="loading" :data="tableData.data" width="900px" size="small" @selection-change="handleSelectionChange"  ref="multipleTable">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column prop="uid" label="ID" min-width="60" />
        <el-table-column prop="realName" label="昵称" min-width="130" />
        <el-table-column label="用户头像" min-width="80">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image class="tabImage" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]" />
            </div>
          </template>
        </el-table-column>

        <el-table-column label="是否已读" min-width="130" >
          <template slot-scope="scope">
            <span>{{ scope.row.isRead==1?'已读':'未读' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="简介" min-width="130" />
        <el-table-column prop="createTime" label="创建时间" min-width="130" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {getSendUserList} from '@/api/course'
import {deleteRecords} from '@/api/send'
import {sendRecords} from '@/api/course'
import {
  userListApi
} from '@/api/user'
import {
  listDept
} from '@/api/dept'
import {
  getRoleList
} from '@/api/role'
import {
  listPost
} from '@/api/post'
export default {
  name: 'UserList',
  filters: {
    saxFilter(status) {
      const statusMap = {
        1: '男',
        2: '女'
      }
      return statusMap[status]
    }
  },
  props:{
    dayId:{
      default:null
    },
    uid:{
      default:''
    }
  },
  data() {
    return {
      dialogVisible:false,
      templateRadio: 0,
      loading: false,
      tableData: {
        data: [],
        total: 0
      },
      tableFrom: {
        page: 1,
        limit: 10,
        keywords: ''
      },
      deptList: [],
      branchList: [],
      roleList: [],
      cUids: []
    }
  },
  mounted() {
    this.getList()
    this.deptLists();
    this.branchLists();
    this.roleLists();
  },
  methods: {
    delRecords(row){
      deleteRecords({id:row.uid}).then(res=>{
        console.log(res)
      })
    },
    handleSelectionChange(val) {
      const tables = []
      val.map((item) => {
        tables.push({ src: item.image,
          id: item.id })
      })
      this.multipleSelection = val
    },

    // 分行
    deptLists() {
      listDept({pageSize: 999}).then(async res => {
        this.deptList = res.list
      })
    },

    // 岗位
    branchLists() {
      listPost({pageSize: 999}).then(async res => {
        this.branchList = res.list
      })
    },

    // 等级列表
    roleLists() {
      getRoleList({pageSize: 999}).then(async res => {
        this.roleList = res.list
      })
    },

    //复选框内容改变
    getTemplateRow(idx, row) {
      if(this.cUids.indexOf(row.uid) != -1){
        this.cUids.push(row.uid)
      }
      //this.$emit('getTemplateRow', row);
    },


    // 列表
    getList() {
      this.loading = true
      sendRecords({uid:this.uid}).then(res=>{
        this.tableData.data = res
        this.tableData.total = res.length
        this.loading = false
      }).catch(res => {
      this.$message.error(res.message)
      this.loading = false
      })

    },
    search() {
      this.loading = true
      userListApi(this.tableFrom).then(res => {
        this.tableData.data = res.list
        this.tableData.total = res.total
        this.loading = false
      }).catch(res => {
        this.$message.error(res.message)
        this.loading = false
      })
    },
    pageChange(page) {
      this.tableFrom.page = page
      this.getList()
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val
      this.getList()
    },

    resetForm(name) {
      this.$refs[name].resetFields();
      this.getList()
    },

  }
}
</script>

<style scoped> 
</style>
